<template>
	<view class="bill">
		<view class="tab_nav" style="background-color: #FFFFFF;">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(item.index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 主题内容 -->
		<view v-if="isActive==0">
			<view class="bor_None" v-if="billArr.length == 0">
				<view class="bor_Noneone">
					<image class="bor_Noneimage" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/zanwushuju.png" mode="">
					</image>
				</view>
				<view class="bor_Nonetext">暂无账单数据</view>
			</view>
			<view class="main" style="padding: 5px 12px;">
				<view class="mian_btm shadow rounded-1 bg-white" v-for="(item,index) in billArr" :key='index'>
					<view class="mian_btm_left" @click="billBtn('/homePage1/bill/billDetail',item)">
						<view style="padding-bottom: 10px;">
							<view style="display:flex;flex-direction:row-reverse;margin-bottom: -25px;">
								<!--物业费对物业公司来说是收入 对业主来说是支出 所以将原来代表的参数反一下就行  0:支出 1：收入-->
								<view class="notice-type" v-if="item.book_in_out===0||item.book_in_out===2">
									收入
								</view>
								<view class="notice-typePuTong" v-if="item.book_in_out===1">
									支出
								</view>
							</view>
							<view style="display: flex;margin-top: -20rpx; align-items: center;">
								<view style="display: flex;align-items: center;">
									<image style="width: 36rpx;height: 36rpx;margin-top: -2px;"
										src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/money2.png" mode=""></image>
								</view>
								<view style="margin-left: 14rpx;font-weight: 550;font-size: 18px;margin-top: -2px;">
									{{
										  	item.book_subject == 1 ? "物业费"
										  :	item.book_subject == 2 ? "维修费"
										  :	item.book_subject == 3 ? "公告收益"
										  :	item.book_subject == 4 ? "代扣代缴"
										  :	item.book_subject == 5 ? "押金"
										  :	item.book_subject == 6 ? "工资"
										  :	item.book_subject == 7 ? "物业费"
										  :	item.book_subject == 8 ? "社保"
										  :	item.book_subject == 9 ? "采购"
										  :	item.book_subject == 10 ? "设备维保费"
										  :	item.book_subject == 11 ? "设备维修费"
										  :	item.book_subject == 12 ? "工程材料费"
										  :	item.book_subject == 13 ? "其他"
										  :	item.book_subject == 23 ? "退款"
										  :  getValShort(item.book_types)
											}}
								</view>
							</view>

						</view>
						<view class="flexClsNowrapSpcBtw mb-3" style="margin-top: 20rpx;">
							<view class="">
								<view class="flexClsNowrapSpcBtw">
									<view class="bh" style="color:#999;margin-right: 20rpx;">缴费类型</view>
									<view class="num" v-if='!item.book_channel_of_disbursement'>线下支付</view>
									<view class="num" v-if='item.book_channel_of_disbursement==1'>小程序支付</view>
									<view class="num" v-if='item.book_channel_of_disbursement==2'>h5支付</view>
									<view class="num" v-if='item.book_channel_of_disbursement==3'>App支付</view>
								</view>
							</view>
							<view class="">
								<view class="flexClsNowrapSpcBtw">
									<view class="bh" style="color:#999;margin-right: 20rpx;">缴费方式</view>
									<view class="num" v-if="item.book_pay_type==1">微信</view>
									<view class="num" v-if="item.book_pay_type==2">支付宝</view>
									<view class="num" v-if="item.book_pay_type==3">现金</view>
									<view class="num" v-if="item.book_pay_type==4">银行卡</view>
									<view class="num" v-if="item.book_pay_type==5">支票</view>
									<view class="num" v-if="item.book_pay_type==6">银行对私账户</view>
									<view class="num" v-if="item.book_pay_type==7">银行对公账户</view>
								</view>
							</view>
						</view>
						<view style="color: #999; display: flex;">
							<view class="">
								{{item.book_create_time}}
							</view>
							<view class="jujue" v-show="item.book_status ==3">已退款</view>
							<!-- <view class="main_btm_right">
								<view class="jujue" v-show="item.book_status ==3">已退款</view>
							</view> -->
						</view>
					</view>

					<view class="main_btm_right">
						<view class='bill_main_r_txt'
							:style="item.book_status ==3 ? 'margin-left: -30px;' : 'margin-right: 16px'">
							{{item.book_money.toFixed(2)}} <span
								style="color: #000;font-weight: 500;font-size: 15px;margin-left: 5px;">元</span>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="isActive==1">

			<view class="bor_None" v-if="tableData.length == 0">
				<view class="bor_Noneone">
					<image class="bor_Noneimage" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/zanwushuju.png" mode="">
					</image>
				</view>
				<view class="bor_Nonetext">您没有申请开过发票</view>
			</view>

			<view style="width: 95%;margin: auto;">
				<view style="margin-top: 10px;background: #fff;padding: 10px 20px;" v-for="(item,index) in tableData"
					@click="billBtn('/privateMsg/invoice/invoiceDetail',item)">
					<view style="display: flex;">
						<view>
							<view>
								<h3>{{item.fee_name}}</h3>
							</view>
						</view>
					</view>

					<view style="float: right;margin-top: -18px;">
						<view class="notice-type" v-if="item.invoice_status == 1">
							未开票
						</view>
						<view class="notice-type" v-if="item.invoice_status == 1">
							待开票
						</view>

						<view class="notice-typep" v-if="item.invoice_status == 3">
							已开票
						</view>
					</view>
					<view style="display: flex;margin-top: 10px;font-family: Verdana, STFangsong, 苹方-简;">
						<view style="color:#666666">取票方式：</view>
						<span v-if="item.ticket_collection_method === 1" style="color: #00a0e9">自取</span>
						<span v-if="item.ticket_collection_method === 2" style="color: #b94a48">快递</span>
						<span v-if="item.ticket_collection_method === 3" style="color: #f0a83b">邮箱</span>
					</view>
					<view style="display: flex;margin-top: 10px;font-family: Verdana, STFangsong, 苹方-简;">
						<view style="#666666">状态：</view>
						<text style="color: #f0a83b"
							v-if="item.ticket_collection_method == 1 && item.courier_number == null">未领取</text>
						<text
							v-if="item.ticket_collection_method === 1 && item.courier_number!=null && item.confirm_the_people==null"
							style="color: #f0a83b">未领取</text>
						<text
							v-if="item.ticket_collection_method === 1 && item.courier_number!=null && item.confirm_the_people!=null"
							style="color: #00a0e9">已领取</text>
						<text v-if="item.ticket_collection_method === 2 && item.courier_number==null"
							style="color: #b94a48">未快递</text>
						<text v-if="item.ticket_collection_method === 2 && item.courier_number!=null"
							style="color: #3b97d7">已快递</text>
						<text v-if="item.ticket_collection_method === 3" style="color: #0c630c">已发送</text>
					</view>



					<view style="display: flex;margin-top: 10px;font-family: Verdana, STFangsong, 苹方-简;">
						<view style="#666666">楼宇号：</view>
						<view style="color: #999999;">1区-2-101</view>
					</view>
					<view style="display: flex;margin-top: 10px;">
						<view style="#666666">发票金额：</view>
						<view style="#333333">{{item.amount_of_money}}</view>
					</view>
					<view style="display: flex;margin-top: 10px;">
						<view style="#666666">申请日期：</view>
						<view style="#333333">{{item.begin_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- </viewData> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				list: 15,
				page: 0,
				billArr: [],
				showFlag: false,
				navList: [{
					index: 0,
					title: '账单'
				}, {
					index: 1,
					title: "发票"
				}],
				nextPage: false,
				listData: [],
				pageIndex: 1,
				loading: false,
				tableData: [],
			}
		},
		onShow() {
			this.checkLogin()
		},
		onPullDownRefresh() {
			this.hourseNum = uni.getStorageSync('hourseNum') || 0
			this.getBillData()
		},
		onLoad() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist)
		},

		methods: {
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode

							this.getBillData()
							this.hourseNum = uni.getStorageSync('hourseNum') || 0
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()

			},
			getValShort(val) {
				var str = val;
				if (val.length > 13) {
					str = val.substring(0, 13) + '...';
				}
				return str;
			},
			//刷新下拉
			// onRefresh() {
			// 	if (this.nextPage) {
			// 		this.pageIndex = this.pageIndex + 1;
			// 		if(this.isActive == 0){
			// 			this.getBillData()
			// 		}
			// 		if(this.isActive == 1){
			// 			this.getInvoiteList()
			// 		}
			// 	}
			// },
			//账单列表跳转详情
			billBtn(url, item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});
			},
			async getBillData() {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getOwnerCost({
					pageIndex: this.pageIndex,
					room_id: this.homelist.roomId,
				}).then(res => {
					if (this.pageIndex == 1) {
						this.billArr = res.data.data.datalist || [];
					} else {
						this.billArr = [...this.billArr, ...res.data.data.datalist];
					}
					this.nextPage = this.pageIndex < (res.data.data.total / 10) ? true : false
					this.loading = true;
					uni.hideLoading();

				})
				uni.stopPullDownRefresh()
			},
			checked(index) {
				this.isActive = index;
				console.log(this.isActive)
				this.pageIndex = 1;
				if (this.isActive == 0) {
					this.getBillData()
				}
				if (this.isActive == 1) {
					this.getInvoiteList()
				}
			},
			getInvoiteList() {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getInvoite({
					pageIndex: this.pageIndex,
					invoice_status: 3,
					room_id: this.homelist.roomId,
				}).then(res => {
					console.log(uni.getStorageSync('rawData').userId)
					console.log(res)
					if (this.pageIndex == 1) {
						this.tableData = res.data.data.datalist || [];
					} else {
						this.tableData = [...this.tableData, ...res.data.data.datalist];
					}
					this.nextPage = this.pageIndex < (res.data.data.total / 10) ? true : false
					this.loading = true;
					uni.hideLoading();

				})

			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f4f4f4;
	}

	.bill {
		background: #f4f4f4;
		width: 100vw;
		height: 100vh;
	}

	// page {
	// 	background-color: rgb(244, 244, 244)
	// }
	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #427705;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #427705;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.add-process {
		width: 102rpx;
		height: 102rpx;
		position: fixed;
		right: 36rpx;
		bottom: 230rpx;
	}

	.sticky {
		width: 750rpx;
		height: 120rpx;
		line-height: 120rpx;
		color: #000;
		padding-left: 30rpx;
		border-top: 1px solid #ccc;
		background-color: #fff;
	}

	.main_top {
		overflow: hidden;
		height: 120rpx;
		line-height: 120rpx;

		.main_top1 {
			float: left;
			margin-left: 30rpx;
		}

		.main_top2 {
			float: right;
			margin-right: 30rpx;
			color: rgb(158, 158, 158);
		}
	}

	.mian_btm {
		margin-top: 5px;
		background-color: #fff;
		overflow: hidden;

		.mian_btm_left {
			// float: left;
			padding: 30rpx;

			view {
				// padding: 0 0 15px 0;
			}
		}

		.main_btm_right {
			float: right;
			margin-top: -40px;

			// line-height: 270rpx;
			.bill_main_r_txt {
				height: 20rpx;
				font-size: 40rpx;
				font-weight: 550;
				color: orange;
			}
		}
	}

	.jujue {
		width: 106rpx;
		line-height: 38rpx;
		text-align: center;
		color: #FFFFFF;
		background: #FD3636;
		border-radius: 6rpx;
		font-size: 22rpx;
		// float: right;
		margin-left: 20rpx;
	}

	.bor_None {
		.bor_Noneone {
			width: 232px;
			height: 242px;
			margin: 110px auto;

			.bor_Noneimage {
				width: 100%;
				height: 100%;
			}
		}

		.bor_Nonetext {
			width: 62%;
			margin: -66px auto;
			text-align: center;
			color: #999;
		}

	}

	.notice-type {
		background: linear-gradient(90deg, #FF8C00 0%, #FF8C00 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 20rpx;
	}

	.notice-typePuTong {
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 20rpx;
	}

	.notice-typep {
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 20rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 20rpx;
	}
</style>